<template>
<h2>鼠标批量拖拽元素复位效果</h2>
<div class="file-container-main">
    <div class="file-container" id="box" @mousedown="onMouseDown">
        <!-- 拖拽过程中添加：item-file-dragging，拖拽结束移除：item-file-dragging -->
        <div 
            :class="[
                'file-item file-folder',
                {
                    'select': dragItems.some(e => e.flipKey === item.flipKey)
                },
                {
                    'item-file-dragging': isDragMouseDown&&dragItems.some(e => e.flipKey === item.flipKey)
                },
                {
                    'is-allow': item.isFlash
                }
            ]" 
            v-for="(item, index) in fileItems" 
            :key="index" 
            :tabindex="index" 
            :data-flip-key="item.flipKey" 
            @mouseenter="onMouseEnter($event, item, index)" 
            @mouseleave="onMouseLeave($event, item, index)"
            @mouseover="onMouseOver($event, item, index)"
            @mousedown="onItemMouseDown($event, item, index)"
            >
            <div class="file-icon">
                <img class="cus-img" v-if="item.isFolder" src="@/assets/images/folder.png" alt="">
                <img class="cus-img" v-else src="@/assets/images/txt.png" alt="">
            </div>
            <div class="file-name">{{ item.name }}</div>
        </div>

        <!-- 绘制选区 -->
        <div ref="drawSelectAreaRef" class="draw-selection"></div>

        <!-- 拖拽内容 -->
        <div class="file-dragging-wrap">
            <p v-if="draggingItem"
                :class="{
                    'bg-warning': !draggingItem.isDragging,
                    'bg-ok': draggingItem.isFolder&&draggingItem.isDragging,
                    'bg-error': draggingItem.isFolder === 0
                }">
                <span v-if="draggingItem.isFolder&&draggingItem.isDragging">移动到:</span>
                <span v-else>禁止移动到:</span>
                <span>{{ draggingItem.name }}</span>    
            </p>
            <div class="drag-number"><b>{{selectedData.length}}个项目</b></div>
            <div class="drag-content">
                <div 
                    class="file-item file-folder" 
                    v-for="(item, index) in dragItems" 
                    :key="index" :tabindex="index" 
                    :data-flip-key="item.flipKey"
                    :style="{
                        transform: index > 0 ? `rotate(-${index * 5}deg) scale(0.7)`:'scale(0.7)',
                        zIndex: dragItems.length+1 - index
                    }">
                    <div class="file-icon">
                        <img class="cus-img" v-if="item.isFolder" src="@/assets/images/folder.png" alt="">
                        <img class="cus-img" v-else src="@/assets/images/txt.png" alt="">
                    </div>
                    <div class="file-name">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script setup>
import { selectDragFn } from './select-drag';


const fileItems = ref([
  { flipKey: 'one', name: '文件夹1', isFolder: 1,icon: '@/assets/images/folder.png' },
  { flipKey: 'two', name: '文件夹2', isFolder: 1, icon: '@/assets/images/folder.png' },
  { flipKey: 'three', name: '记事本文件1', isFolder: 0,icon: '@/assets/images/txt.png' },
  { flipKey: 'four', name: '记事本文件2',isFolder: 0,icon: '@/assets/images/txt.png' },
  { flipKey: 'five', name: '记事本文件3', isFolder: 0,icon: '@/assets/images/txt.png' },
  { flipKey: 'sex', name: '记事本文件4', isFolder: 0,icon: '@/assets/images/txt.png'},
  { flipKey: 'seven', name: '记事本文件5',isFolder: 0,icon: '@/assets/images/txt.png' },
]);
const draggingItem = ref(null)

const { selectedData, dragItems, isDragMouseDown, onMouseDown, onItemMouseDown } = selectDragFn({ fileData: fileItems.value })

const onMouseEnter = (evt, item, index)=> {
    if (item.isFolder&&dragItems.value.some(e => e.flipKey === item.flipKey)) {
        item['isDragging'] = false
    } else item['isDragging'] = true
    draggingItem.value = item
    evt.target.classList.add('hover')
}
const onMouseLeave = (evt, item, index)=> {
    item['isFlash'] = false
    draggingItem.value = null
    evt.target.classList.remove('hover')
}
var timeOut;
const onMouseOver = (evt, item, index) => {
    if (!draggingItem.value || !item.isFolder) {
        item['isFlash'] = false
    }

    timeOut = setTimeout(() => {
        if (!draggingItem.value) {
            item['isFlash'] = false
            clearTimeout(timeOut)
        }
        if (item.isFolder&& 
            isDragMouseDown.value &&
            draggingItem.value&&
            draggingItem.value.isDragging&&
            (draggingItem.value.flipKey === item.flipKey)) 
        {
            item['isFlash'] = true
        }
    }, 2000);
}

</script>
<style lang="scss" src="./style.scss"></style>